<template>
    <div class="app-container">
        <el-card :style="{ borderRadius: '5px' }">
            <div class="filter-container">
                <el-date-picker v-model="model.month" type="month" value-format="yyyy-MM" placeholder="选择月份">
                </el-date-picker>
                <el-input v-model="model.username" placeholder="请输入用户名" style="width: 200px; margin-left: 10px"
                    @keyup.enter.native="handleFilter" />
                <el-button v-waves type="primary" style="margin-left: 10px" plain icon="el-icon-search"
                    @click="handleFilter">搜索</el-button>
            </div>
        </el-card>
        <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
            <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
                color: '',
                fontSize: '',
                backgroundColor: '#dfe6ec',
            }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
                <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
                <el-table-column label="用户名" prop="name" min-width="150px" align="center" show-overflow-tooltip />

                <el-table-column label="需要打卡天数" prop="need_days" align="center" show-overflow-tooltip />
                <el-table-column label="实际打卡天数" prop="actual_days" align="center" show-overflow-tooltip />
                <el-table-column label="是否当月完成打卡" min-width="80px" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <span v-if="row.full == 1">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column label="奖金金额" prop="money" align="center" show-overflow-tooltip />
                <el-table-column label="转账状态" min-width="80px" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <span v-if="row.touser == 1">已转账</span>
                        <span v-else>未转账</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120px" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" v-if="scope.row.touser == 0" plain
                            @click="handleTransfer(scope.row)">转账</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-show="listLoading" class="pagination-container">
                <el-pagination :current-page.sync="model.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>
<script>
import {
    checkBonusList,
    bonusPayToUser
} from "@/api/system/user";
export default {
    data() {
        return {
            model: {
                pageNo: 1,
                pageSize: 10,
                month: this.getCurrentYearMonth(),
            },
            list: [],
            listLoading: false,
            loading: false,
            extra: {}, //额外参数(用于格式化)
            total: 0,
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.listLoading = false;
            checkBonusList(this.model).then((res) => {
                let data = res.data.list;
                this.list = data;
                this.extra = res.extra;
                this.total = res.data.total;
                this.listLoading = true;
            });
        },
        getCurrentYearMonth() {
            const date = new Date();
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            return `${year}-${month}`;
        },
        handleFilter() {
            this.model.pageNo = 1;
            console.log(this.model)
            this.getList();
        },
        handleSizeChange(val) {
            this.model.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.model.pageNo = val;
            this.getList();
        },
        handleTransfer(row) {
            this.$confirm(`是否转账给${row.name}用户，金额${row.money}`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "none",
            }).then(() => {
                bonusPayToUser({ userid: row.userid, month: this.model.month }).then((res) => {
                    this.$message({
                        message: "转账成功",
                        type: "success",
                    });
                    this.model.pageNo = 1;
                    this.list = [];
                    this.getList();
                });
            });
        }
    }
}
</script>
<style lang="scss" scoped></style>